<template>
	<div class="publicpageview">
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">

					<el-form-item label="区房屋管理单位：" prop="dname" label-width="140px">
						<el-select  :disabled='isluru' clearable v-model="listQuery.dname" @change='areaChange'>
							<div v-for="(item,index) in areaList" :key="index">
								<el-option :label="item.dname" :value="item.did" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="管理部(分中心)：" prop="manageDepartment" label-width="140px">
						<el-select  :disabled='isluru' clearable v-model="listQuery.manageDepartment" @change='HouseChange'>
							<div v-for="(item,index) in HouseList" :key="index">

								<el-option :label="item.aname" :value="item.aid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="BlockNo">
						<el-input v-model="listQuery.BlockNo"></el-input>
					</el-form-item>
					<el-form-item label="所地址：" prop="BlockAddress">
						<el-input v-model="listQuery.BlockAddress"></el-input>
					</el-form-item>
					<el-form-item label="终止项：" prop="endProduct" label-width="140px">
						<el-select clearable v-model="listQuery.endProduct">
							<el-option label="已终止" value="1" key="1"></el-option>
							<el-option label="未终止" value="2" key="2"></el-option>
							<el-option label="默认" value="0" key="0"></el-option>
						</el-select>
					</el-form-item>
				</div>
			</el-form>
			<div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
				<el-button size="mini" @click="resetTop">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="openQuanxian">权限申请</el-button>
			<el-button v-if="isCompute('房间-录入')" type="primary" size="mini" @click="gotoluru('',1)">资料录入</el-button>
			<el-button v-if="isCompute('房间-批量删除')" type="primary" size="mini" @click="alldelete">批量删除</el-button>
			<el-button type="primary" size="mini" @click="handleout">导出</el-button>
			<el-table @selection-change="selectChange" max-height='500px' v-loading="listLoading" :data="list" border fit
				highlight-current-row size="mini">
				<el-table-column type="selection" align="center" prop="phone">
				</el-table-column>

				<el-table-column align="center" label="所号" prop="blockno">
				</el-table-column>

				<el-table-column align="center" label="门号" prop="buildingdoorno">
				</el-table-column>

				<el-table-column align="center" label="楼层" prop="floorno">
				</el-table-column>

				<el-table-column align="center" label="单元号" prop="apartmentno">
				</el-table-column>

				<el-table-column align="center" label="间号" prop="roomno">
				</el-table-column>

				<el-table-column align="center" label="用途" prop="use">
				</el-table-column>

				<el-table-column align="center" label="计租面积" prop="rentarea">
				</el-table-column>

				<el-table-column align="center" label="性质" prop="livingway">
				</el-table-column>

				<el-table-column align="center" label="操作" width="280">
					<template slot-scope="scope">
						<el-button v-if="isCompute('房间-修改')" type="text" size="mini"
							@click="gotoluru(scope.row.roomid,2)">修改</el-button>
						<el-button type="text" size="mini" @click="gotoluru(scope.row.roomid,3)">详情</el-button>
						<el-button v-if="isCompute('房间-删除')" type="text" size="mini"
							@click="handleDelete(scope.row.roomid)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

		<!-- 弹窗部分 -->
		<el-dialog :title="type==1?'管片资料修改':type==2?'管理部(分中心)资料合并':type==3?'管理部(分中心)拆分':type==4?'区房屋管理单位调整':''"
			:visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<div class="title">{{type==1?'':type==2?'合并后—管理部(分中心)信息':type==3?'被拆分—管理部(分中心)信息':type==4?'':''}}</div>
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
				<el-form-item label="区房屋管理单位：" prop="deptId">
					<el-select :disabled='type!=1&&type!=6&&type!=4' v-model="formData.deptId">
						<el-option label="事业部" value="1" key="1"></el-option>
						<el-option label="生活部" value="0" key="0"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="管理部(分中心)：" prop="deptId">
					<el-select :disabled='type!=1&&type!=6&&type!=4' v-model="formData.deptId">
						<el-option label="事业部" value="1" key="1"></el-option>
						<el-option label="生活部" value="0" key="0"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="管片代码：" prop="userName">
					<el-input :readonly='type!=1&&type!=6&&type!=4' v-model="formData.userName"></el-input>
				</el-form-item>
				<el-form-item label="管片名称：" prop="phone">
					<el-input :readonly='type!=1&&type!=6&&type!=4' v-model.number="formData.phone"></el-input>
				</el-form-item>

				<el-form-item label="状态：" prop="userStatus">
					<el-select :disabled='type!=1&&type!=6&&type!=4' v-model="formData.userStatus">
						<el-option label="启用" value="1" key="1"></el-option>
						<el-option label="禁用" value="0" key="0"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="备注：" prop="remarks">
					<el-input :readonly='type!=1&&type!=6&&type!=4' v-model="formData.remarks" type="textarea"
						:rows="2"></el-input>
				</el-form-item>
			</el-form>

			<div class="saveContent">
				<el-button type="primary" @click="dialogVisible = false" size="medium">保 存</el-button>
			</div>
		</el-dialog>

		<!-- 弹窗部分 -->
		<el-dialog title="操作权限申请" :visible.sync="isQuanxian" width="50%" :before-close="handleClose">
			<el-form :model="qxQuery" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px">
				<el-form-item label="权限名称：" prop="permission">
					<el-select v-model="qxQuery.permission">
						<el-option label="房间-删除" value="房间-删除"></el-option>
						<el-option label="房间-修改" value="房间-修改"></el-option>
						<el-option label="房间-录入" value="房间-录入"></el-option>
						<el-option label="房间-批量删除" value="房间-批量删除"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="申请人员：" prop="userName">
					<el-input v-model="qxQuery.userName" disabled></el-input>
				</el-form-item>

				<el-form-item label="生效开始时间：" prop="startTime">
					<el-date-picker v-model="qxQuery.startTime" type="date" placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="生效结束时间：" prop="endTime">
					<el-date-picker v-model="qxQuery.endTime" type="date" placeholder="选择日期时间" align="right">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="申请缘由说明：" prop="remake">
					<el-input v-model="qxQuery.remake" type="textarea" :rows="2"></el-input>
				</el-form-item>
			</el-form>

			<div class="saveContent">
				<el-button type="primary" @click="qxSave" size="medium">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		roomList,
		getArea,
		getHouseAdmin,
		permissionApply,
		delRoom,
		delMultipleRoom
	} from '@/api/industry'
	export default {
		name: 'AccommodationManagementChanquanzhengjian',

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					BlockAddress: '',
					BlockNo: '',
					endProduct: '',
					DID: '',
					AID: '',
					manageDepartment:"",
					dname:''
				},
				total: 0,
				options: [{
					key: '1'
				}],
				list: [],
				listLoading: false,
				dialogVisible: false,
				chaifenVisible: false,
				isQuanxian: false,
				formData: {
					userId: '',
					userName: '',
					phone: '',
					deptId: '',
					roleId: '',
					userStatus: '1',
					remarks: ''
				},
				qxQuery: {
					endTime: '',
					permission: '',
					remake: '',
					startTime: '',
					userName: ''
				},
				type: '',
				cfType: '',
				areaList: [],
				HouseList: [],
				isQuanxian: false,
				isSearch: false,
				arrID: [],
				userList: [],
				isluru:false
			}
		},

		computed: {},

		mounted() {
			// this.roomList()
			if (localStorage.getItem('userHouseAdminId') > 0) {
				this.listQuery.DID = localStorage.getItem('userDID')
				this.listQuery.dname = localStorage.getItem('userDname')
				this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
				this.listQuery.AID = localStorage.getItem('userHouseAdminId')
				this.isluru = true
			}
			
			this.getArea()
			this.qxQuery.userName = localStorage.getItem('username')
			this.userList = JSON.parse(localStorage.getItem('userList'))

			localStorage.removeItem('jibenxinxi')
			localStorage.removeItem('feizhuzaizujing')
			localStorage.removeItem('zhuzaizujing')
			localStorage.removeItem('roomid')
		},

		methods: {
			isCompute(name) {
				if (this.userList.find((item) => item.permission === name)) {
					return true
				} else {
					return false
				}
			},
			// 权限申请
			openQuanxian() {
				this.isQuanxian = true
			},
			qxSave() {
				let data = this.qxQuery
				data.startTime = data.startTime ?
					dayjs(data.startTime).format('YYYY-MM-DD HH:mm:ss') :
					''
				data.endTime = data.endTime ?
					dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss') :
					''
					data.type = 0
				permissionApply(data).then((res) => {
					console.log(res)
					this.$message({
						type: 'success',
						message: '操作成功!'
					})
					this.isQuanxian = false
				})
			},
			getArea() {
				getArea().then((res) => {
					console.log(res)
					this.areaList = res.data
				})
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then((res) => {
					this.HouseList = res.data
				})
			},
			roomList() {
				let data = {
					BlockAddress: this.listQuery.BlockAddress,
					BlockNo: this.listQuery.BlockNo,
					endProduct: this.listQuery.endProduct,
					pageNum: this.listQuery.pageNum,
					pageSize: this.listQuery.pageSize,
					DID: this.listQuery.DID,
					AID: this.listQuery.AID
				}
				this.listLoading = true
				roomList(data).then((res) => {
					this.list = res.data.list
					this.total = res.data.total
					this.listLoading = false
				})
			},

			// 选择区房屋管理
			areaChange(e) {
				if(e){
					this.listQuery.DID = e
					this.getHouseAdmin(e)
				}
					this.listQuery.AID = ''
			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.listQuery.AID = e
			},
			// 查询
			sumbitCx() {
				this.roomList()
			},
			// 重置
			resetTop() {
				;
				(this.listQuery.pageNum = 1),
				(this.listQuery.pageSize = 20),
				(this.listQuery.BlockAddress = ''),
				(this.listQuery.BlockNo = ''),
				(this.listQuery.endProduct = '')
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1
				this.listQuery.pageSize = val
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
			},

			resetForm(val) {
				console.log('1')
				this.$refs[val].resetFields()
			},

			handleAddUser() {
				this.$router.push('chanquanziliaoluru')
			},
			handleUpdate(currentData, type) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.type = type
				this.dialogVisible = true
				this.$nextTick(() => {
					this.formData = {
						...currentData
					}
				})
			},
			openQuanxian() {
				this.isQuanxian = true
			},
			handleDelete(roomid) {
				let userList = JSON.parse(localStorage.getItem('userList'))
				if (!userList.find((item) => item.permission === '房间-删除')) {
					this.$message({
						type: 'success',
						message: '请申请“房间-删除”权限或刷新页面!'
					})
				} else {
					this.$confirm(
							'此操作将删除该条内容，请确认是否继续操作？',
							'删除提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}
						)
						.then(() => {
							let data = {
								RoomID: roomid
							}
							delRoom(data).then((res) => {
								this.roomList()
								this.$message({
									type: 'success',
									message: '删除成功!'
								})
							})
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							})
						})
				}
			},
			// 录入
			gotoluru(id, type) {
				let userList = JSON.parse(localStorage.getItem('userList'))
				if (type == 1) {
					if (!userList.find((item) => item.permission === '房间-录入')) {
						this.$message({
							type: 'success',
							message: '请申请“房间-录入”权限或刷新页面!'
						})
					} else {
						this.$router.push('fangjianziliaoluru')
					}
				} else if (type == 2) {
					if (!userList.find((item) => item.permission === '房间-修改')) {
						this.$message({
							type: 'success',
							message: '请申请“房间-修改”权限或刷新页面!'
						})
					} else {
						this.$router.push({
							path: 'fangjianziliaoluru',
							query: {
								roomid: id,
								type: type
							}
						})
					}
				} else {
					this.$router.push({
						path: 'fangjianziliaoluru',
						query: {
							roomid: id,
							type: type
						}
					})
				}
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},
			// 批量删除所
			selectChange(e) {
				console.log(e)
				let arrID = []
				e.forEach((item, index) => {
					arrID.push(item.roomid)
				})
				this.arrID = arrID
			},
			alldelete() {
				let userList = JSON.parse(localStorage.getItem('userList'))
				if (!userList.find((item) => item.permission === '房间-批量删除')) {
					this.$message({
						type: 'success',
						message: '请申请“房间-批量删除”权限或刷新页面!'
					})
				} else {
					console.log(this.arrID)
					if (this.arrID.length > 0) {
						let data = {
							RoomID: this.arrID
						}
						delMultipleRoom(data).then((res) => {
							console.log(res)
							this.$message({
								type: 'success',
								message: '操作成功'
							})
							this.roomList()
						})
					} else {
						this.$message({
							type: 'success',
							message: '请选择删除对象!'
						})
					}
				}
			},
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							BlockAddress: this.listQuery.BlockAddress,
							BlockNo: this.listQuery.BlockNo,
							endProduct: this.listQuery.endProduct,
							pageNum: this.listQuery.pageNum,
							pageSize: 999999
						}
						roomList(data).then((res) => {
							let list = res.data.list
							let outList = []
							res.data.list.forEach((item, index) => {
								outList.push({
									所号: item.blockno,
									门号: item.buildingdoorno,
									楼层: item.floorno,
									单元号: item.apartmentno,
									间号: item.roomno,
									用途: item.use,
									计租面积: item.rentarea,
									备注: item.roommemo1
								})
							})
							// 获取表格数据
							const data = outList
							// 转换数据为工作表
							const worksheet = XLSX.utils.json_to_sheet(data)
							// 创建新的工作簿
							const workbook = XLSX.utils.book_new()
							// 将工作表添加到工作簿
							XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
							// 导出Excel文件
							XLSX.writeFile(workbook, '房间资料.xlsx')
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消导出'
						})
					})
			}
		}
	}
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.title {
		color: #008c93;
		text-align: center;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.cfguanpian {
		padding-bottom: 20px;
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.title2 {
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.tianjiaButton {
		border: 2px solid #008c93;
		background-color: #fff;
		color: #008c93;
	}
</style>